import React, { Component } from 'react';
import { View, Text } from '@tarojs/components';

interface defaultState{
    dataList:any[]
}
interface props{
    dataList:any[]
}
class TodoList extends Component<props,{}> {
      constructor(props:props) {
          super(props);
      }
      state:defaultState={
          dataList:[
          {
              title:'英语学习',
              color:"red",
              id:"1",
              isgroup:true,
              list:[
                  {
                    id:1,
                    desc:"背诵20个单词",
                    trunof:true
                  },
                  {
                    id:2,
                    desc:"朗读短文",
                    trunof:true
                  },
                  {
                    id:3,
                    desc:"练习语法",
                    trunof:true
                  }
              ]
          },
          {
            title:'健身锻炼2',
            color:"red",
            id:"1",
            isgroup:true,
            list:[
                {
                    id:1,
                    desc:"冥想20分钟",
                    trunof:true
                }
            ]
          }
        
        ]
      }
      
      render() {
          return (
              <View className="todoList">
                  {this.state.dataList.map((item)=>{
                      return ( 
                          <View className="todoCard" key={item.id}>
                              <View className={`"todoTag" ${item.color}`}>{item.title}</View>
                              <View className="todoItems">
                               {
                                   item.list&&item.list.length>0&&item.list.map((item)=>{
                                       return (
                                        <View key={item.id} className={`todoItem`}>
                                            {item.desc}
                                        </View>
                                       )
                                   })
                               }
                               </View>
                           </View>
                      )
                  })}
              </View>
          )
      }
}

export default TodoList;